import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:meco/common/index.dart';
import 'package:meco/main.dart';
import '../controller.dart';

class BottomNavBar extends StatelessWidget {
  final MainController controller;

  const BottomNavBar({super.key, required this.controller});

  @override
  Widget build(BuildContext context) {
    return Stack(
      alignment: Alignment.bottomCenter,
      children: [
        // 底层白色部分
        Container(
          height: 100.h,
          decoration: BoxDecoration(
            color: Colors.white,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(24.r),
              topRight: Radius.circular(24.r),
            ),
            boxShadow: [
              BoxShadow(
                color: Colors.black.withOpacity(0.08),
                blurRadius: 8.r,
                spreadRadius: 1.r,
                offset: Offset(0, -2.h),
              ),
            ],
          ),
        ),

        // 上层蓝色导航栏
        Container(
          height: 98.h,
          decoration: BoxDecoration(
            color: AppColors.primary,
            borderRadius: BorderRadius.only(
              topLeft: Radius.circular(22.r),
              topRight: Radius.circular(22.r),
            ),
          ),
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceAround,
            children: List.generate(
              controller.bottomNavItems.length,
              (index) => _buildNavItem(index),
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildNavItem(int index) {
    return Obx(() {
      bool isSelected = controller.currentIndex.value == index;
      Color iconColor = isSelected ? AppColors.primary : Color(0xFF4882DF);

      return GestureDetector(
        onTap: () => controller.changePage(index),
        behavior: HitTestBehavior.translucent,
        child: Padding(
          padding: EdgeInsets.only(bottom: 12.h),
          child: SizedBox(
            width: 90.w,
            height: 49.h,
            child: Stack(
              alignment: Alignment.center,
              children: [
                // 选中时的白色背景
                AnimatedContainer(
                  duration: const Duration(milliseconds: 300),
                  curve: Curves.easeOutCubic,
                  height: isSelected ? 49.h : 0,
                  width: isSelected ? 150.w : 0,
                  decoration: BoxDecoration(
                    color: Colors.white,
                    borderRadius: BorderRadius.circular(24.5.r),
                  ),
                ),

                // 图标和文字
                Row(
                  mainAxisSize: MainAxisSize.min,
                  children: [
                    // 图标
                    AnimatedContainer(
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.easeOutCubic,
                      padding: EdgeInsets.only(right: isSelected ? 4.w : 0),
                      child: TweenAnimationBuilder<double>(
                        tween: Tween<double>(
                          begin: isSelected ? 0.8 : 1.0,
                          end: isSelected ? 1.1 : 1.0,
                        ),
                        curve: Curves.elasticOut,
                        duration: const Duration(milliseconds: 500),
                        builder: (context, value, child) {
                          return Transform.scale(
                            scale: value,
                            child: Icon(
                              controller.bottomNavItems[index].icon,
                              color: iconColor,
                              size: 24.sp,
                            ),
                          );
                        },
                      ),
                    ),

                    // 文字
                    AnimatedContainer(
                      duration: const Duration(milliseconds: 300),
                      curve: Curves.easeOutCubic,
                      width: isSelected ? null : 0,
                      child:
                          isSelected
                              ? AnimatedOpacity(
                                opacity: isSelected ? 1.0 : 0.0,
                                duration: const Duration(milliseconds: 300),
                                child: Row(
                                  children: [
                                    SizedBox(width: 4.w),
                                    Text(
                                      controller.bottomNavItems[index].label,
                                      style: TextStyle(
                                        color: AppColors.primary,
                                        fontWeight: FontWeight.bold,
                                        fontSize: 16.sp,
                                      ),
                                    ),
                                  ],
                                ),
                              )
                              : const SizedBox.shrink(),
                    ),
                  ],
                ),
              ],
            ),
          ),
        ),
      );
    });
  }
}
